<template>
	<view class="detail">
		<u-popup 
			v-model="isOpen" 
			mode="center" 
			:mask="false" 
			:borderRadius="10" 
			width="404rpx" 
			@close="close">
            <view class="panel">
				<view class="panel-group">
					<view class="panel-item">
						<view class="panel-item-header">类型：</view>
						<view class="panel-item-body">{{ detail.name }}</view>
					</view>
					<view class="panel-item">
						<view class="panel-item-header">位置：</view>
						<view class="panel-item-body">{{ detail.addr }}</view>
					</view>
				</view>
            </view>
		</u-popup>
	</view>
</template>
<script>
	import {getLocation, getSystemInfo, reverseGeocode, mergeUrls, moveToLocation, deepClone, gcj02towgs84, wgs84togcj02, formatDate} from '@/util/util.js';
	export default {
		props: {
			event: {
				type: Object,
				default: () => ({})
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isOpen: false,
				detail: {
					name: '',
					addr: ''
				}
			}
		}, 
		methods: {
			async setVal(val) {
				this.detail.name = val.facilityName;
				
				let cood = JSON.parse(val.facilityData[0]['grid'])['coordinates']
				
				cood = wgs84togcj02(cood[0], cood[1]);
				
				let { address } = await reverseGeocode(cood[0], cood[1]);
				
				this.detail.addr = address || '地址';
			},
			open() {},
			close() {
				this.$emit('update:show', false)
			}
		},
		watch: {
			event: {
				handler(val){
					this.setVal(val);
				},
				deep: true
			},
			show: {
				handler(val){
					this.isOpen = val;
				},
				deep: true
			}
		},
		created() {},
		mounted() {
			
		}
	}
</script>
<style lang="scss">
	.detail /deep/ .u-mode-center-box{
		border: 1rpx solid #b2b2b2;
	}
	
	.panel{
		padding: 50rpx 30rpx 50rpx 61rpx;
		.panel-group{
			.panel-item{
				margin-bottom: 14rpx;
				display: flex;
				.panel-item-header{
					width: 80rpx;
					font-size: 26rpx;
					line-height: 34rpx;
					color: #505050;
				}
				.panel-item-body{
					width: calc(100% - 80rpx);
					font-size: 26rpx;
					line-height: 34rpx;
					color: #505050;
				}
			}
		}
	}
</style>